import React, { useRef, useEffect } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { ProTable } from "@ant-design/pro-components";
import { Button, Space } from "antd";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import style from "./applicationresultquery.module.scss";

export default function ApplicationResultQuery() {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const actionRef = useRef();
  const refData = localStorage.getItem("i18nextLng");

  const columns = [
    {
      title: () => <>{t("form.ApplicationNo")}</>,
      // title: "申请编号",
      dataIndex: "applytitle",
    },

    {
      title: () => <>{t("form.ApplicationTime")}</>,
      // title: "申请时间",
      dataIndex: "created_at",
      valueType: "dateRange",
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },

    {
      // title: "子商户号",
      title: () => <>{t("form.SubmerchantNo")}</>,
      dataIndex: "shanghao",
      hideInTable: true,
    },

    {
      title: () => <>{t("form.producttype")}</>,
      disable: true,
      // title: "产品类型",
      dataIndex: "type",
      valueType: "select",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.TransactionType")}</>,
      disable: true,
      // title: "交易类型",
      valueType: "select",
      dataIndex: "jiaoyileixing",
      hideInTable: true,
    },
    {
      title: () => <>{t("form.Ouraccount")}</>,
      disable: true,
      // title: "本方账户",
      dataIndex: "benfnag",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.Oppositeaccount")}</>,
      disable: true,
      // title: "对方账户",
      dataIndex: "duifang",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.Salesamount")}</>,
      disable: true,
      // title: "卖出金额",
      dataIndex: "maichu",
      hideInSearch: true,
    },
    {
      disable: true,
      title: () => <>{t("form.Purchaseamount")}</>,
      // title: "买入金额",
      dataIndex: "mairu",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "卖出币种",
      title: () => <>{t("form.Sellingcurrency")}</>,
      dataIndex: "Sellingcurrency",
      valueType: "select",
      hideInTable: true,
      valueEnum: {
        all: { text: "超长".repeat(50) },
        open: {
          text: "未解决",
          status: "Error",
        },
        closed: {
          text: "已解决",
          status: "Success",
          disabled: true,
        },
        processing: {
          text: "解决中",
          status: "Processing",
        },
      },
    },
    {
      // title: "买入币种",
      title: () => <>{t("form.Buycurrency")}</>,
      hideInTable: true,
      dataIndex: "Buycurrency",
      valueType: "select",
      valueEnum: {
        open: "未解决",
        close: "解决",
        lal: "拖延",
      },
    },
    {
      title: () => <>{t("form.State")}</>,
      disable: true,
      // title: "状态",
      dataIndex: "state",
      valueType: "select",
    },
    {
      title: () => <>{t("form.Option")}</>,
      // title: "操作",
      valueType: "option",
      key: "option",
      render: (text, record, _, action) => [
        <a key="editable">{t("form.Close")}</a>,
      ],
    },
  ];

  return (
    <div className={style.ApplicationResultBoss}>
      <ProTable
        style={{ height: "100%" }}
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}, sort, filter) => {
          console.log("params", params, "sort", sort, "filter", filter);
          const data = [
            {
              id: 1,
              shanghao: "11",
              applytitle: "1212121",
            },
            {
              id: 2,
              shanghao: "22",
              maichu: "121312",
            },
            {
              id: 3,
              shanghao: "22",
              maichu: "速度输出",
            },
            {
              id: 4,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
          ];

          return {
            data: data,
          };
        }}
        form={{ labelWrap: true }}
        search={{
          labelWidth: 90,
          // span: 12,
          optionRender: ({ searchText, resetText }, { form }, dom) => [
            <Button
              key="searchText"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
            >
              {t("buttons.query")}
            </Button>,
            <Button
              key="resetText"
              onClick={() => {
                form?.resetFields();
              }}
            >
              {t("buttons.Reset")}
            </Button>,
          ],
          collapseRender: (collapsed, showCollapseButton) => {
            return collapsed ? (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 展开 */}
                {t("buttons.Open")}
              </Button>
            ) : (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 关闭 */}
                {t("buttons.Close")}
              </Button>
            );
          },
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            导出
          </Button>,
        ]}
      />
    </div>
  );
}
